<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的模板</title>

</head>

<body>


    <div id="app">

        <cpnf></cpnf>

    </div>

</body>



<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
    //子组件
    const cpn1 = Vue.extend({
        template: `
        <span>子组件</span>        
      `
    })

    //父组件
    const cpn2 = Vue.extend({
            template: `
        <div>
          <cpnz></cpnz>
          <span>父组件</span> 
        </div>
      `,
            components: {
                cpnz: cpn1,
            }
        })
        //root根组件
    const app = new Vue({
        el: '#app',
        data: {},
        components: {
            cpnf: cpn2,
        }
    })
</script>